<template>
  <div class="get_eth_performance">
    <!--    <el-header style="background-color: #1bdb35">ETH Performance</el-header>-->
    <el-form v-show="false" :model="performance" ref="ruleForm" label-width="150px" class="config_form">
      <el-form-item label="双向时延">
        <el-input v-model="performance.delay">
          <i slot="suffix" style="margin-right: 10px;">us</i>
        </el-input>
      </el-form-item>
      <el-form-item label="近端测量到的丢包率">
        <el-input v-model="performance.nearPacketLossRate"></el-input>
      </el-form-item>
      <el-form-item label="远端测量到的丢包率">
        <el-input v-model="performance.farPacketLossRate"></el-input>
      </el-form-item>
      <el-form-item label="发送的流量字节数">
        <el-input v-model="performance.txBytes">
          <i slot="suffix" style="margin-right: 10px;">byte</i>
        </el-input>
      </el-form-item>
      <el-form-item label="接收的流量字节数">
        <el-input v-model="performance.rxBytes">
          <i slot="suffix" style="margin-right: 10px;">byte</i>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-image
            style="width: 20px; height: 25px;"
            :src="require('@/assets/union_rule_font.jpg')"
            :preview-src-list="[require('@/assets/union/ethPerformance.jpg')]">
        </el-image>

      </el-form-item>
    </el-form>

    <el-descriptions

        :column="1"
        border
        style="width: 280px"
    >
      <template slot="extra">
        <el-button type="success" size="mini">刷新</el-button>
      </template>
      <el-descriptions-item label-class-name="my_label">
        <template slot="label">
          双向时延
        </template>
        {{ performance.delay }}
        <i>us</i>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i></i>
          近端测量到的丢包率
        </template>
        {{ performance.nearPacketLossRate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i></i>
          远端测量到的丢包率
        </template>
        {{ performance.farPacketLossRate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          发送的流量字节数
        </template>
        {{ performance.txBytes }}
        <i>byte</i>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          接收的流量字节数
        </template>
        {{ performance.rxBytes }}
        <i>byte</i>
      </el-descriptions-item>
    </el-descriptions>
    <div style="padding-bottom: 30px">
      <el-button @click="close" style="float: right;margin-right: 20px;margin-top: 5px">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "EthPerformance",
  data() {
    return {
      performance: {
        delay: 0,
        nearPacketLossRate: 0,
        farPacketLossRate: 0,
        txBytes: 0,
        rxBytes: 0,
      }
    }
  },
  methods:{
    close(){
      this.$bus.$emit('close:view',false);
    }
  }
}
</script>

<style>
.get_eth_performance {
  width: 300px;
  height: auto;
  /*float: left;*/
  margin-left: 30px;
}
.el-descriptions-row>td>i{
  float: right;
  margin-right: 2px;
  color: #b3b1b1;

}
.my_label{
  width: 150px!important;
}
</style>